import React, { Component } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'
import orangeLogo from '../../assets/img/logo_orange.png'
import './Login.less'
export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        phone: '',
        password: '',
      }
    }
  }
  changeUser(v, k) {
    this.setState({
      user: {
        ...this.state.user,
        [k]: v,
      }
    })
  }
  async login() {
    let { data: res } = await reqlogin(this.state.user);
    if (res.code === 200) {
      Toast.show({
        content: res.msg
      });
      let list = res.list ? res.list : [];
      localStorage.setItem('isLogin',JSON.stringify(list));
      this.props.history.push('/index');
    }
  }
  render() {
    let { user } = this.state
    return (
      <div className='login'>
        <Header register title="登录"></Header>
        <div className="loginBox">
          <div>{JSON.stringify(user)}</div>
          <img src={orangeLogo} alt="" />
          <Form layout='horizontal'>
            <Form.Item label='手机号' name='username'>
              <Input placeholder='请输入手机号' clearable value={user.phone} onChange={(v) => this.changeUser(v, 'phone')} />
            </Form.Item>
            <Form.Item
              label='密码'
              name='password'
            >
              <Input
                placeholder='请输入密码'
                clearable
                type='password'
                value={user.password}
                onChange={(v) => this.changeUser(v, 'password')}
              />
            </Form.Item>
          </Form>
          <Button onClick={() => this.login()} block shape='rounded' color='primary'>
            登录
          </Button>
        </div>

      </div>
    )
  }
}
